<template>
  <div id="samemap">
    <div v-for="(item,index) in showcontent" :key="index" class="samebox">
      <img :src="sameimg[index]" alt />
      <h3>{{item.name}}</h3>
      <div class="price">
        <i class="icon iconfont icon-xingxing"></i>
        <i class="icon iconfont icon-xingxing"></i>
        <i class="icon iconfont icon-xingxing"></i>
        <i class="icon iconfont icon-xingxing"></i>
        <i class="icon iconfont icon-xingxing"></i>
        <span>￥{{item.price}}/人</span>
      </div>
      <div class="addr">{{item.address}}</div>
    </div>
    <!-- 分页器 -->
    <div class="block" v-if="shoupage">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="12"
        layout="prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      samecontent: [],
      showcontent: [],
      sameimg: [],
      currentPage3: 1,
      total: "",
      shoupage:true,
    };
  },
  created() {
    window.console.log(localStorage.city);
    var _this = this;
    var url = "http://localhost:3000";
    _this.$axios
      .post(url + "/index/same", {
        city: localStorage.city
      })
      .then(function(response) {
        window.console.log(response);

        _this.samecontent = response.data.result;
        // 获取总条数
        _this.total = _this.samecontent.length;
        if(_this.total>12){
          _this.showcontent = _this.samecontent.slice(0, 12);
        }else{
          _this.shoupage=false;
        }
        

        window.console.log(_this.showcontent);

        for (var i = 0; i < _this.samecontent.length; i++) {
          window.console.log(i, _this.samecontent[i].image);
          _this.sameimg.push(
            require("../assets/images/" + _this.samecontent[i].image)
          );
          // _this.sameimg.push(require(_this.sameconten[i].image));
        }
        window.console.log(_this.sameimg);
      })
      .catch(function(error) {
        window.console.log(error);
      });
  },
  methods: {
    handleSizeChange(val) {
      window.console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      window.console.log(`当前页: ${val}`);
      const num = (val - 1) * 12;
      const page = this.samecontent.length;
      let yunum = page % 12;
      window.console.log(num, page, yunum);
      if (yunum == 0) {
        yunum = 12;
      }
      if (num > 0) {
        this.showcontent = this.samecontent.slice(num, num + yunum);
        window.console.log(this.showcontent);
      }else{
        this.showcontent = this.samecontent.slice(num, 12);
      }
    }
  }
};
</script>
<style scoped>
#samemap {
  width: 100%;
  margin: 20px auto;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
#samemap .samebox {
  width: 22%;
  padding-bottom: 20px;
  margin-top: 15px;
  background: #f8f6f7;
  margin-right: 4%;
  text-align: center;
}
#samemap .samebox:nth-child(4n) {
  margin-right: 0px;
}
.samebox img {
  width: 100%;
}
.samebox h3 {
  margin: 0px;
}
.price {
  margin: 10px auto;
  font-size: 14px;
  color: #ec6a17;
}
.addr {
  font-size: 14px;
}
.block {
  width: 100%;
  text-align: center;
  margin: 10px auto;
  float: left;
}
</style>